<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">
	<h:head>
		<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
		<style type="text/css">
.ui-widget {
	font-size: 75%;
}

.themeMenu {
	overflow: auto;
	height: 300px;
	width: 200px;
}
</style>
	</h:head>

	<h:body>

		<p:layout fullPage="true">

			<p:layoutUnit id="top" position="north" resizable="true" size="100"
				minSize="100" maxSize="175">
				<h:outputText value="PRIMEFACES - Next Generation Component Suite"
					style="font-size:36px;position:absolute;top:25px;left:100px;" />
			</p:layoutUnit>

			<p:layoutUnit id="bottom" position="south" size="50" zindex="0"
				scrollable="null">
				<h:outputLink
					value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/ui/layoutComplex.xhtml">
                                View Page Source (layoutComplex.xhtml)
                        </h:outputLink>

				<br />

				<h:outputLink
					value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/java/org/primefaces/examples/view/LayoutBean.java">
                                View Backing Bean Source (LayoutBean.java)
                        </h:outputLink>
			</p:layoutUnit>

			<p:layoutUnit id="left" position="west" size="300" resizable="true"
				closable="true" collapsible="true" header="Options" minSize="200">
				<p:accordionPanel activeIndex="0" autoHeight="false">
					<p:tab title="Menu 1">
						<p:calendar mode="inline" navigator="none" />
					</p:tab>

					<p:tab title="Menu 2">
						<h:outputText value="Menu 2 Content" />
					</p:tab>

					<p:tab title="Menu 3">
						<h:outputText value="Menu 3 Content" />
					</p:tab>
				</p:accordionPanel>
			</p:layoutUnit>

			<p:layoutUnit id="right" position="east" size="250" header="Gallery"
				resizable="true" closable="true" collapsible="true">

				<h:form>

				</h:form>

				<p:lightBox transition="fade"
					style="text-align:center;margin-top:20px;">
					<h:outputLink value="#{request.contextPath}/images/nature1.jpg"
						title="Nature 1" style="margin-bottom:5px;">
						<h:graphicImage value="/images/nature1_small.jpg" />
					</h:outputLink>

					<h:outputLink value="#{request.contextPath}/images/nature2.jpg"
						title="Nature 2" style="margin-bottom:2px;">
						<h:graphicImage value="/images/nature2_small.jpg" />
					</h:outputLink>

					<h:outputLink value="#{request.contextPath}/images/nature3.jpg"
						title="Nature 3" style="margin-bottom:2px;">
						<h:graphicImage value="/images/nature3_small.jpg" />
					</h:outputLink>

					<h:outputLink value="#{request.contextPath}/images/nature4.jpg"
						title="Nature 4" style="margin-bottom:2px;">
						<h:graphicImage value="/images/nature4_small.jpg" />
					</h:outputLink>

				</p:lightBox>

			</p:layoutUnit>

			<p:layoutUnit id="center" position="center"
				style="text-align:center;" scrollable="true">
				<h:form>
					<p:tabView>
						<p:tab title="Videos">
							<p:media value="http://vimeo.com/moogaloop.swf?clip_id=12440890"
								width="500" height="500" player="flash" />
						</p:tab>
					</p:tabView>

					<p:commandButton id="basic" value="Show Dialog"
						onclick="dlg.show();" type="button" />

					<p:dialog header="Dialog" widgetVar="dlg" maximizable="true"
						minimizable="true">
						<h:outputText value="This Dialog can be Maximized and Minimized!" />
					</p:dialog>

				</h:form>


			</p:layoutUnit>

		</p:layout>

	</h:body>

</f:view>
</html>
